<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>首页</title>
	<script src="../js/header.js"></script>
	<style>
		.title_name{
			font-family: SourceHanSansCN-Medium;
			font-size: 22px;
			color: #323232;
		}
		ul,li{
			list-style-type: disc;
			list-style-position: inside;
		}
		.content_ul li{
			padding: 22px 0 22px 22px;
			border-top: 1px solid #EBEBEB;
			/*cursor: pointer;*/
		}
		.content_ul li:first-child{
			border-top: 0;
		}
		.content_ul li:hover{
			background: #3389D4;
			color: #fff;
		}
		.content_ul li:after{
			content: '';
			width: 0;
			height: 0;
			clear: both;
		}
		.content_ul li span{
			display: inline-block;
			white-space: nowrap;
			overflow: hidden;
			-ms-text-overflow: ellipsis;
			text-overflow: ellipsis;
			width: 77%;
			vertical-align: text-bottom;
		}
		.more_more{
			font-family: SourceHanSansCN-Regular;
			font-size: 17px;
			color: #696969;
			cursor: pointer;
		}
		.more_more:hover{
			color: #3389D4;
		}

		.quick_access{
			margin-top: 30px;
			margin-bottom: 20px;
		}
		.quick_access:after{
			content: '';
			width: 0;
			height: 0;
			clear: both;
		}
		.quick_access div{
			float: left;
			margin-left: 33px;
			margin-bottom: 10px;
			cursor: pointer;
		}
	</style>
</head>
<body>
<div v-cloak id="app_index">
	<el-row>
		<el-col class="quick_access">
			<div v-for="(item,index) in fastlist" v-show="item.show" @mouseenter="changeImg(item,index)" @mouseleave="recovery(item,index)">
				<a href="#" @click="addTab(item)">
					<img :src="item.img" />
				</a>
			</div>
		</el-col>
	</el-row>
	<el-row v-show="showDbLists" style="margin-bottom: 30px;">
		<!-- 待办 -->
		<el-col :span="11" style="margin-left: 36px;margin-right: 5px;background: #FFFFFF;border: 1px solid #D6D7DC;box-shadow: 0 2px 7px 0 rgba(213,221,237,0.50);">
			<el-row style="padding: 0px 11px 0px 21px;height: 72px;border-bottom: 1px solid #EBEBEB;">
				<el-col :span="6" style="margin-top: 19px;">
					<img src="../images/daiban.png" style="display: inline-block;position: relative;top: 6px;"/>
					<span class="title_name" style="display: inline-block;margin-left: 12px;">待办工作</span>
				</el-col>
				<el-col :span="2" style="float: right;margin-top: 25px;">
					<span class="more_more" @click="addTab(dbBtn)">更多></span>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<ul class="content_ul" v-if="contentRequire.length != 0">
						<li v-for="list in contentRequire" :title="list.title">
							<span>{{ list.title }}</span>
							<div style="float: right;padding-right: 22px;">{{ list.createTime }}</div>
						</li>
					</ul>
					<ul class="content_ul" v-else>
						<li  style="list-style: none;text-align: center;">
							<span style="font-size: 20px; list-style: none;">暂无数据</span>
						</li>
					</ul>

				</el-col>
			</el-row>

		</el-col>
		<!-- 已办 -->
		<el-col :span="11" style="margin-right: 10px;margin-left: 44px;background: #FFFFFF;border: 1px solid #D6D7DC;box-shadow: 0 2px 7px 0 rgba(213,221,237,0.50);">
			<el-row style="padding: 0px 11px 0px 21px;height: 72px;border-bottom: 1px solid #EBEBEB;">
				<el-col :span="6" style="margin-top: 19px;">
					<img src="../images/yiban.png" style="display: inline-block;position: relative;top: 4px;"/>
					<span class="title_name" style="display: inline-block;margin-left: 12px;">已办工作</span>
				</el-col>
				<el-col :span="2" style="float: right;margin-top: 25px;">
					<span class="more_more" @click="addTab(ybBtn)">更多></span>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<ul class="content_ul" v-if="contentFinished.length != 0">
						<li v-for="list in contentFinished" :title="list.title">
							<span>{{ list.title }}</span>
							<div style="float: right;padding-right: 22px;">{{ list.createTime }}</div>
						</li>
					</ul>
					<ul class="content_ul" v-else>
						<li  style="list-style: none;text-align: center;" >
							<span style="font-size: 20px; ">暂无数据</span>
						</li>
					</ul>
				</el-col>
			</el-row>
		</el-col>
	</el-row>
</div>
</body>
<script>
    var sy = new Vue({
        el: '#app_index',
        data(){
            return {
                showDbLists: false,
                fastlist: [
                    {
                        menuId: '',
                        menuName: '建设单位注册',
                        menuUrl: '',
                        img: '../images/sy/建设单位注册.png',
                        index: '1205853114104451073',
                        show: false
                    },
                    {
                        menuId: '',
                        menuName: '安评单位注册',
                        menuUrl: '',
                        img: '../images/sy/安评单位注册.png',
                        index: '1205853399086436354',
                        show: false
                    },
                    {
                        menuId: '',
                        menuName: '地震小区划工作成果监管',
                        menuUrl: '',
                        img: '../images/sy/小区划成果监管.png',
                        index: '1205855313962373122',
                        show: false
                    },
                    {
                        menuId: '',
                        menuName: '安评单位监管',
                        menuUrl: '',
                        img: '../images/sy/安评单位监管.png',
                        index: '1205855408510373890',
                        show: false
                    },
                    {
                        menuId: '',
                        menuName: '区域地震安全性评估成果监管',
                        menuUrl: '',
                        img: '../images/sy/区域成果监管.png',
                        index: '1205855208609845249',
                        show: false
                    },
                    {
                        menuId: '',
                        menuName: '全覆盖监管',
                        menuUrl: '',
                        img: '../images/sy/安评工作全监管.png',
                        index: '20818812375965697',
                        show: false
                    },
                    {
                        menuId: '',
                        menuName: '随机监管',
                        menuUrl: '',
                        img: '../images/sy/安评工作随机监管.png',
                        index: '20818655341223938',
                        show: false
                    },
                    {
                        menuId: '',
                        menuName: '区域地震安全性评估成果',
                        menuUrl: '',
                        img: '../images/sy/区域评估结果.png',
                        index: '1205853969033629698',
                        show: false
                    },
                    {
                        menuId: '',
                        menuName: '地震小区划工作成果',
                        menuUrl: '',
                        img: '../images/sy/小区划成果.png',
                        index: '1205854242728742914',
                        show: false
                    },
                    {
                        menuId: '',
                        menuName: '安评工作成果备案',
                        menuUrl: '',
                        img: '../images/sy/安评工作备案.png',
                        index: '1205853691358121986',
                        show: false
                    }
                ],
                contentRequire: [],
                contentFinished: [],
                dbBtn: {
                    menuId: '',
                    menuName: '待办',
                    menuUrl: ''
                },
                ybBtn: {
                    menuId: '',
                    menuName: '已办',
                    menuUrl: ''
                }
            }
        },
        mounted() {
            this.showFastBtn();
            this.getData();
        },
        methods:{
            showFastBtn(){
                var menulist = JSON.parse(localStorage.getItem("menuList"));
                var fastlist = this.fastlist;
                // 遍历--匹配
                for (var i=0; i<fastlist.length; i++) {
                    var ftxt = fastlist[i].menuName;
                    for (var j=0; j<menulist.length; j++) {
                        if (ftxt == menulist[j].menuName) {
                            fastlist[i].show = true;
                            fastlist[i].menuId = menulist[j].menuId; // 添加id
                            fastlist[i].menuUrl = menulist[j].menuUrl; // 添加url
                            break;
                        }
                    }
                }

                var dbBtn = this.dbBtn;
                var ybBtn = this.ybBtn;
                // 判断待办、已办
                for (var j=0; j<menulist.length; j++) {
                    if ('待办' == menulist[j].menuName) {
                        this.showDbLists = true;
                        dbBtn.menuId = menulist[j].menuId; // 添加id
                        dbBtn.menuUrl = menulist[j].menuUrl; // 添加url
                        continue;
                    }
                    if ('已办' == menulist[j].menuName) {
                        this.showDbLists = true;
                        ybBtn.menuId = menulist[j].menuId; // 添加id
                        ybBtn.menuUrl = menulist[j].menuUrl; // 添加url
                        continue;
                    }
                }
            },
            getData(){
                axios({
                    method: 'get',
                    url: '/dzjap/todo/firstPageInfo'
                })
                    .then(response => {
                    let listdata = response.data;
                if (listdata.code == 200) {
                    this.contentFinished = listdata.data.finish.results;
                    this.contentRequire = listdata.data.todo.results;

                } else {
                    this.$message.error(listdata.msg);
                }
            })
            .catch(function (error) {
                    console.log(error);
                });
            },
            addTab(item){
                parent.vue.addTab(item);
            },
            // hover图片
            changeImg(item,index){
                if(index == 0){
                    item.img = '../images/sy/hover/建设单位注册.png';
                }else if(index == 1){
                    item.img = '../images/sy/hover/安评单位注册.png';
                }else if(index == 2){
                    item.img = '../images/sy/hover/小区划成果监管.png';
                }else if(index == 3){
                    item.img = '../images/sy/hover/安评单位监管.png';
                }else if(index == 4){
                    item.img = '../images/sy/hover/区域成果监管.png';
                }else if(index == 5){
                    item.img = '../images/sy/hover/安评工作全监管.png';
                }else if(index == 6){
                    item.img = '../images/sy/hover/安评工作随机监管.png';
                }else if(index == 7){
                    item.img = '../images/sy/hover/区域评估结果.png';
                }else if(index == 8){
                    item.img = '../images/sy/hover/小区划成果.png';
                }else if(index == 9){
                    item.img = '../images/sy/hover/安评工作备案.png';
                }
            },
            recovery(item,index){
                if(index == 0){
                    item.img = '../images/sy/建设单位注册.png';
                }else if(index == 1){
                    item.img = '../images/sy/安评单位注册.png';
                }else if(index == 2){
                    item.img = '../images/sy/小区划成果监管.png';
                }else if(index == 3){
                    item.img = '../images/sy/安评单位监管.png';
                }else if(index == 4){
                    item.img = '../images/sy/区域成果监管.png';
                }else if(index == 5){
                    item.img = '../images/sy/安评工作全监管.png';
                }else if(index == 6){
                    item.img = '../images/sy/安评工作随机监管.png';
                }else if(index == 7){
                    item.img = '../images/sy/区域评估结果.png';
                }else if(index == 8){
                    item.img = '../images/sy/小区划成果.png';
                }else if(index == 9){
                    item.img = '../images/sy/安评工作备案.png';
                }
            }
        }
    })
</script>
</html>
